<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
	 <title>Interactivités</title>
     <link rel="stylesheet" href="css/style.css" type="text/css">
     <meta name="viewport" content="width=device-width" />
</head>

<body>
	<header>
		<h1 class="title">Interactivités</h1>
	</header>
	<main>
		Pour les plus jeunes élèves, vous trouverez un ensemble d'applications personnalisables qui leur sont dédiées. 
		<h3>Les exercices interactifs d'OpenBoard</h3>
		<p>Avec ces interactivités, vous pouvez créer différents types d'exercices. Il peut s'agir de catégorisation, calcul mental, mémorisation, etc.</p>
		<p>Les interactivités sont situées dans la bibliothèque OpenBoard : cliquez sur <span class="icon"><img src="../../assets/common/InteractivesCategory.png" alt=""></span> pour les trouver.</p>

		<h3>Exemple</h3>
		<p>Nous allons créer un exercice utilisant l'interactivité "<strong>Cat</strong>egorize <strong>pict</strong>ures" (traduction : Catégorisez des images) : <span class="icon"><img src="../../assets/hint9/cat-pict.png" alt=""></span></p>
		<span class="tip"><span class="icon"><img src="../../assets/common/tip.png" alt=""></span>Essayez ! Déplacez cette fenêtre sur un côté et reproduisez l'exemple sur le Tableau !</span>
		<p>Tout d'abord, glissez-déposez l'interactivité sur le tableau, et cliquez sur "Modifier"</p>
		<p>Ensuite, changez les noms des catégories selon vos besoins :</p>
		<div class="image"><img id="interactivite3" src="../../assets/hint9/interactivite3.png" alt=""></div>

		<span class="tip"><span class="icon"><img src="../../assets/common/tip.png" alt=""></span>Vous pouvez ajouter ou supprimer des catégories en utilisant les icônes + et -</span>

		<p>Ensuite, ajoutez les images correspondant à chaque catégorie.</p>
		<div class="image"><img src="../../assets/hint9/interactivite-gif2.gif" alt=""></div>

		<p>Enfin, cliquez sur "Afficher" pour voir le résultat et faire l'exercice.</p>
		<div class="image"><img src="../../assets/hint9/interactivite-gif3.gif" alt=""></div>
		
		<span class="tip"><span class="icon"><img src="../../assets/common/tip.png" alt=""></span>Vous pouvez relancer l'exercice en cliquant sur l'icône "Recharger".</span>
	</main>
	<footer>

	</footer>
</body>
</html>
